<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue';

import { formatDate } from '@vben/utils';

import { Button, Card } from 'ant-design-vue';

import PositionExperienceDetail from './positionExperienceDetail.vue';

const props = defineProps<{
  listData: any[];
}>();

const emit = defineEmits<{
  (e: 'edit', item: any): void;
  (e: 'delete', item: any): void;
}>();

function handleEdit(item: any) {
  emit('edit', item);
}

function handleDelete(item: any) {
  emit('delete', item);
}
</script>

<template>
  <div>
    <Card
      v-for="item in props.listData"
      :key="item.id"
      class="mt-4"
      :title="`${item.workUnit || '未知单位'}：${formatDate(item.startDate)} ~ ${formatDate(item.endDate)}`"
    >
      <template #extra>
        <div class="card-actions">
          <Button size="small" type="primary" @click="handleEdit(item)">
            编辑
          </Button>
          <Button size="small" danger @click="handleDelete(item)">
            删除
          </Button>
        </div>
      </template>

      <PositionExperienceDetail :data="item" />
    </Card>
  </div>
</template>

<style scoped>
.card-actions {
  display: flex;
  gap: 8px;
}
</style>
